import React from 'react';
import { NavBar, Button } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate, useLocation } from 'react-router-dom';
import '../styles/paymentSuccess.scss';

const PaymentSuccessPage: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();

    // 生成随机订单号
    const generateOrderNumber = () => {
        const date = new Date();
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const random = Math.floor(Math.random() * 10000000).toString().padStart(7, '0');
        return `${year}${month}${day}${random}`;
    };

    // 从location.state获取预约信息
    const { doctor, selectedDate, selectedTime, selectedPatient, feeInfo, orderNumber: passedOrderNumber, visitAddress: passedAddress } =
        (location.state as any) ||
        {
            doctor: { name: '张医生', title: '主任医师', department: '心内科', hospital: '协和医院' },
            selectedDate: { day: '周四', date: '2023-07-20' },
            selectedTime: '10:00',
            selectedPatient: { name: '张三', age: 35, gender: '男', relation: '本人' },
            feeInfo: { totalFee: 150 },
            passedOrderNumber: null,
            passedAddress: null
        };

    // 就诊地址 - 如果没有传递则使用默认值
    const visitAddress = passedAddress || '北京市朝阳区物南园1号 协和医院门诊楼5层';

    // 订单编号 - 如果没有传递则生成新的
    const orderNumber = passedOrderNumber || generateOrderNumber();

    // 处理返回首页按钮点击
    const handleBackToHome = () => {
        navigate('/');
    };

    // 处理查看订单按钮点击
    const handleViewOrder = () => {
        navigate('/my-appointments');
    };

    return (
        <div className="payment-success-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                onBack={() => navigate('/')}
            >
                支付结果
            </NavBar>

            {/* 支付成功和金额 */}
            <div className="success-card">
                <div className="success-message">支付成功</div>
                <div className="fee-info">订单金额：<span className="amount">¥ {feeInfo.totalFee.toFixed(2)}</span></div>
            </div>

            {/* 预约详情 */}
            <div className="order-info-card">
                <div className="order-title">预约详情</div>

                <div className="info-section">
                    <div className="doctor-avatar">
                        <img src="/images/doctor-avatar.png" alt="医生头像" />
                    </div>
                    <div className="doctor-info">
                        <div className="name-title">{doctor.name} · {doctor.title}</div>
                        <div className="dept-hospital">{doctor.department} · {doctor.hospital}</div>
                        <div className="visit-time">{selectedDate.date} {selectedDate.day} {selectedTime}</div>
                    </div>
                </div>

                <div className="info-item">
                    <div className="label">就诊人</div>
                    <div className="value">{selectedPatient.name} | {selectedPatient.age}岁 | {selectedPatient.gender}</div>
                </div>

                <div className="info-item">
                    <div className="label">就诊地址</div>
                    <div className="value">{visitAddress}</div>
                </div>

                <div className="info-item">
                    <div className="label">订单编号</div>
                    <div className="value order-number">{orderNumber}</div>
                </div>
            </div>

            {/* 底部按钮 */}
            <div className="action-buttons">
                <Button className="view-order-btn" onClick={handleViewOrder}>查看订单</Button>
                <Button className="back-home-btn" onClick={handleBackToHome}>返回首页</Button>
            </div>

            {/* 温馨提示 */}
            <div className="tips-section">
                <div className="tips-title">温馨提示</div>
                <div className="tips-content">
                    <p>1. 请于就诊当天提前30分钟到达医院</p>
                    <p>2. 请保持电话畅通，医生可能会与您联系</p>
                    <p>3. 如需取消预约，请至少提前4小时操作</p>
                </div>
            </div>

            <div className="page-footer">支付成功页</div>
        </div>
    );
};

export default PaymentSuccessPage; 